<template>
    <div ref="container" class="do"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
    props: {
        // 编辑器中呈现的内容
        codes: {
            type: String,
            default: function () {
                return ''
            }
        },
        readOnly: {
            type: Boolean,
            default: function () {
                return true
            }
        },
        // 主要配置
        editorOptions: {
            type: Object,
            default: function () {
                return {
                    selectOnLineNumbers: true,
                    roundedSelection: false,
                    readOnly: this.readOnly, // 只读
                    cursorStyle: 'line', // 光标样式
                    automaticLayout: false, // 自动布局
                    glyphMargin: true, // 字形边缘
                    useTabStops: false,
                    fontSize: 28, // 字体大小
                    autoIndent: false // 自动布局
                }
            }
        }
    },
    mounted () {
        this.monacoEditor = monaco.editor.create(this.$refs.container, {
            value: this.codes,
            language: 'json',
            theme: 'vs-dark', 
            editorOptions: this.editorOptions // 同codes
        }),
        this.monacoEditor.onDidChangeModelContent((event) => {
            let changeContent = this.monacoEditor.getValue()
            console.log(changeContent)
            this.$emit('update:contentBody', changeContent)
        })
    }

}
</script>

<style>
.do{
    width: 95%;
    height: 400px;
    overflow: hidden;
    border: 1px solid #eaeaea;
}
.do .monaco-editor{
    box-shadow: none;
}
</style>
